<script setup>
import {onMounted, reactive, ref, watch, computed} from 'vue'
const props = defineProps({
    src: String
})
const emit = defineEmits(['complete'])
const el = ref()
const visible = ref(false)
const isOrigin = ref(false)
const isMirror = ref(false)
const rotate = ref(0)
const sx = ref(1)
const zoom = ref(1)

const rect = reactive({
    width: 0,
    height: 0,
    left: 0,
    top: 0
})
const deg = computed(() => {
    return `rotate(${rotate.value}deg) scale(${sx.value}, 1)`
})
let originW, originH, md = false

function originSize() {
    isOrigin.value = !isOrigin.value
    calcSize(originW, originH, isOrigin.value)
}

function calcSize(W, H, isOrigin) {
    const WH = window.innerHeight - 24
    const WW = window.innerWidth
    rect.width = W
    rect.height = H
    if(!isOrigin) {
        if(W > WW || H > WH) {
            let ratio = Math.max(H / WH, W / WW)
            rect.width = W / ratio
            rect.height = H / ratio
        }
    }
    zoom.value = Number((rect.width / W).toFixed(1))
    rect.left = (WW - rect.width) / 2
    rect.top = (WH - rect.height) / 2
}
function rotateS(s) {
    rotate.value += s
}
function scaleS() {
    sx.value *= -1
    isMirror.value = sx.value < 0
}
function zoomS(e) {
    const WH = window.innerHeight - 24
    const WW = window.innerWidth
    zoom.value += e
    zoom.value = clamp(Number(zoom.value.toFixed(1)), 0.1, 2)
    rect.width = originW * zoom.value
    rect.height = originH * zoom.value
    rect.left = (WW - rect.width) / 2
    rect.top = (WH - rect.height) / 2
}
function close() {
    if(md) return
    isOrigin.value = false
    visible.value = false
    rotate.value = 0
    sx.value = 1
    isMirror.value = false
}
function clamp(v, min, max) {
    return Math.max(min, Math.min(max, v))
}

function wheel(e) {
    const step = e.deltaY < 0 ? .1 : -.1
    const x = (e.clientX - rect.left) / zoom.value
    const y = (e.clientY - rect.top) / zoom.value
    zoom.value += step
    zoom.value = clamp(Number(zoom.value.toFixed(1)), 0.1, 2)
    rect.width = originW * zoom.value
    rect.height = originH * zoom.value
    rect.left = e.clientX - x * zoom.value
    rect.top = e.clientY - y * zoom.value
}
let x, y;
function mousedown(e) {
    md = true
    e.stopPropagation()
    e.preventDefault()
    x = e.clientX
    y = e.clientY
    document.addEventListener('mousemove', mousemove)
    document.addEventListener('mouseup', mouseup)
}
function mousemove(e) {
    let dx = e.clientX - x;
    let dy = e.clientY - y;
    rect.left += dx
    rect.top += dy
    x = e.clientX
    y = e.clientY
}
function mouseup() {
    document.removeEventListener('mousemove', mousemove)
    document.removeEventListener('mouseup', mouseup)
    setTimeout(() => md = false)
}

watch(() => visible.value, () => {
    if(!visible.value || !el.value) return
    calcSize(originW, originH)
})

onMounted(() => {
    el.value.onload = () => {
        originW = el.value.naturalWidth
        originH = el.value.naturalHeight
        emit('complete')
    }
})
const per = computed(() => {
    return (zoom.value * 100).toFixed(0) + '%' 
})
</script>

<template>
    <div class="c-webrtc-imgview" @click="visible=true">
        <img :src="src" ref="el">
    </div>
    <Teleport to="body">
        <div class="c-webrtc-imgview-container" v-if="visible" @click="close" @wheel.stop.prevent="wheel">
            <img :src="src" 
            :style="{height:rect.height + 'px',width:rect.width+'px', left:rect.left+'px',top:rect.top+'px', transform:deg}" 
            @mousedown.stop="mousedown"
            @click.stop>
            <div class="c-webrtc-imgview-menu" @click.stop>
                <span @click="zoomS(0.2)">+</span>
                <span style="font-size: 16px;">{{ per}}</span>
                <span @click="zoomS(-0.2)">-</span>
                <span class="iconfont icon-jingxiang" @click="scaleS" :class="{active:isMirror}"></span>
                <span class="iconfont icon-xiangzuoxuanzhuan" @click="rotateS(-90)"></span>
                <span class="iconfont icon-screen1-1" @click.stop="originSize" :class="{active:isOrigin}"></span>
                <span class="iconfont icon-guanbi" @click="close"></span>
            </div>
        </div>
    </Teleport>
</template>